.dispatch-main-container {
  display: flex;

  .center-panel {
    height: calc(100vh - 90px);
    position: relative;
    background: #ffffff;
    flex: 1;
    margin: 10px;
  }

  .right-panel {
    width: 400px;
    background: #ffffff;
    height: calc(100vh - 90px);
    overflow: auto;
    margin: 10px 0;
  }


  .weather-wrap {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
  }

  .button-group {
    z-index: 10;
    position: absolute;
    top: 10px;
    right: 40px;
  }

  .canvas-wrap {
    height: calc(100vh - 150px);
    width: calc(100vw - 420px);
    overflow: hidden;
    position: relative;
    margin-top: 60px;
    background: url("../../../../assets/images/ght/newicons/ght-bg.png") no-repeat;
    background-size: 100% 100%;

    .gate-info {
      box-sizing: border-box;
      width: 180px;
      padding: 10px 12px 26px 15px;
      position: absolute;
      display: block;
      background: url("../../../../assets/images/ght/newicons/gate-info-bg.png") no-repeat;
      background-size: 100% 100%;
      font-size: 12px;
      z-index: 30;

      div {
        margin-bottom: 5px;
      }
    }
  }

  .diagram-box {
    position: relative;
    top: 50px;
    left: 0;
    width: calc(100vw - 450px);
    z-index: 5;
    transform-style: preserve-3d;
  }

  .ght-pic {
    width: calc(100vw - 450px);
    height: calc(100vh - 190px);
  }

  .data-box {
    position: absolute;
    color: #000000;
    font-size: 12px;
    line-height: 16px;

    div {
      display: inline-block;
    }
  }

  .gate-box {
    position: absolute;
    z-index: 20;
    display: block;
    transform-style: preserve-3d;

    img {
      width: 2vw;
    }

    .gate-info {
      box-sizing: border-box;
      width: 180px;
      padding: 10px 12px 26px 15px;
      display: none;
      position: absolute;
      top: -113px;
      left: -52px;
      background: url("../../../../assets/images/ght/newicons/gate-info-bg.png") no-repeat;
      background-size: 100% 100%;
      font-size: 12px;
      z-index: 100;

      div {
        margin-bottom: 5px;
      }

      .blue {
        color: #0092F1;
      }
    }

    &:hover {
      .gate-info {
        display: block;
      }
    }
  }

  .jjs-box {
    position: absolute;
    z-index: 9;
    display: block;

    img {
      width: 1.2vw;
      z-index: 10;
    }

    .jjs-text {
      display: none;
      position: absolute;
      white-space: nowrap;
      bottom: 30px;
      left: -120px;
      background-color: #cccccc;
      color: #1A7CEE;
      padding: 2px 10px;
      z-index: 200;
    }

    &:hover {
      .jjs-text {
        display: block;
      }
    }
  }

  .pump-box {
    position: absolute;
    display: block;
    z-index: 10;

    img {
      width: 0.8vw;
    }

    .pump-info {
      box-sizing: border-box;
      width: 180px;
      height: 67px;
      padding: 10px 12px 26px 15px;
      display: none;
      position: absolute;
      top: -64px;
      left: -69px;
      background: url("../../../../assets/images/ght/newicons/gate-info-bg.png") no-repeat;
      background-size: 100% 100%;
      font-size: 12px;
      z-index: 300;

      div {
        margin-bottom: 5px;
      }

      .blue {
        color: #0092F1;
      }
    }

    &:hover {
      .pump-info {
        display: block;
      }
    }
  }

  .warn-box {
    position: absolute;
    display: block;
    z-index: 11;

    img {
      width: 1vw;
    }

    .alarm-text {
      display: none;
      position: absolute;
      width: 368px;
      bottom: 22px;
      left: -150px;
      background-color: #fae3e3;
      color: #ff7f27;
      padding: 2px 10px;
      z-index: 400;
    }

    &:hover {
      .alarm-text {
        display: block;
      }
    }
  }

  .sn-box {
    position: absolute;
    width: 1.6vw;
    display: block;
  }

  .tsz-box {
    position: absolute;
    width: 1.2vw;
    display: block;
  }

  .dm-box {
    position: absolute;
    width: 4vw;
    display: block;
  }

  .legends {
    position: absolute;
    left: 20px;
    bottom: 80px;
    width: 150px;

    [nz-button] {
      display: block;
      margin: 10px 0;
      width: 120px;
      height: 40px;
      color: #ffffff;
      font-size: 15px;
    }

    .btn-type1 {
      background: linear-gradient(to right, #4A73FF, #3297FF);
    }

    .btn-type2 {
      background: linear-gradient(to right, #2BBDFF, #2F9FFF);
    }
  }
}



